<template>
  <div>
    <div class="operation-box">
      <el-button type="primary" v-if="$filters.auth($filters.type.view.key)" @click="handleAdd" :icon="Plus">添加管理员</el-button>
      <el-form inline :model="queryForm" class="filter" label-width="100px">
        <el-form-item label="角色名称：" prop="name">
          <el-col :span="22">
            <el-input v-model="queryForm.entity.userName" placeholder="请输入角色名称" />
          </el-col>
        </el-form-item>
        <el-form-item label="所属角色：">
          <el-col :span="22">
            <el-select v-model="queryForm.entity.roleId" placeholder="请选择" clearable>
              <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item class="filter-actions">
          <el-button class="button-small" type="primary" @click="handleSearch">筛选</el-button>
          <el-button type="text" class="button-reset" @click="handleClear">重置筛选条件</el-button>
        </el-form-item>
      </el-form>
    </div>
    <grid url="manager/list" :params="queryForm" ref="datalist">
      <el-table-column prop="userName" label="管理员账号" />
      <el-table-column prop="name" label="管理员角色" />
      <el-table-column prop="createDate" label="创建日期" />
      <el-table-column label="操作" align="right" width="100">
        <template #default="scope">
          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
          <el-popconfirm v-if="scope.row.roleId > 0" class="btn-popconfirm" @confirm="handleDelete(scope.row.id)" confirmButtonText="确认" cancelButtonText="取消" title="确定要删除该员工吗？">
            <template #reference>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </grid>
    <el-dialog append-to-body v-model="postForm.dialogVisible" title="添加管理员" width="30%" :before-close="handleClose">
      <el-form ref="ruleFormRef" label-width="150px" class="ruleForm" :model="postForm.form" :rules="postForm.rules">
        <el-form-item label="管理员账号：" prop="username">
          <el-col :span="22">
            <el-input v-model="postForm.form.userName" maxlength="20" :disabled="postForm.form.id > 0" show-word-limit placeholder="最多可输入20个字符" />
          </el-col>
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-col :span="22">
            <el-input v-model="postForm.form.password" type="password" maxlength="20" show-word-limit placeholder="最多可输入20个字符" />
          </el-col>
        </el-form-item>

        <el-form-item label="所属角色：" prop="roleId">
          <el-col :span="22">
            <el-select v-model="postForm.form.roleId" placeholder="请选择" :disabled="postForm.form.issuper">
              <el-option key="0" label="超级管理员" :value="0" />
              <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-col>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="postForm.dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSave(ruleFormRef)">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { SaveManager, RemoveManager } from '@/service/manager'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { RoleList } from '@/service/role'
import type { ElForm, ElMessage } from 'element-plus'

type FormInstance = InstanceType<typeof ElForm>
const ruleFormRef = ref<FormInstance>()
const router = useRouter()
interface IQueryForm {
  userName: string
  roleId: number
}
const queryForm = ref<IPageModel>({
  orderbyName: '',
  isAsc: false,
  beginDateTime: '',
  endDateTime: '',
  entity: {},
  page: {
    index: 1,
    size: 10
  }
})
const datalist = ref<null | HTMLElement>(null)
const roleList = ref<Array>([])
const postForm = ref<Array>({
  dialogVisible: false,
  issuper: false,
  form: {
    id: 0,
    userName: '',
    roleId: 0,
    password: ''
  },
  rules: {
    userName: [{ required: true, message: '请输入员工账号', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    roleId: [{ required: true, message: '请输入所属角色', trigger: 'blur' }]
  }
})

const getRoles = (): void => {
  RoleList().then((res: any) => {
    if (res.success) roleList.value = res.data
  })
}

const handleAdd = (): void => {
  postForm.value.dialogVisible = true
  postForm.value.issuper = false
  postForm.value.form.id = 0
  postForm.value.form.userName = ''
  postForm.value.form.roleId = 0
  postForm.value.form.password = ''
}
const handleEdit = (item): void => {
  if (item.roleId === 0) postForm.value.issuper = true
  else postForm.value.issuper = false
  postForm.value.form = item
  console.log(postForm.value.form)
  postForm.value.dialogVisible = true
}
const handleDelete = (id): void => {
  RemoveManager({ id: id }).then((res) => {
    if (res.success) {
      ElMessage.success('已成功删除该员工信息')
      datalist.value.loadData()
    } else {
      return ElMessage.error(res.msg)
    }
  })
}
const handleSave = (formEl: FormInstance | undefined): void => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      SaveManager(postForm.value.form).then((res: any) => {
        if (res.success) {
          postForm.value.dialogVisible = false
          datalist.value.loadData()
        } else {
          return ElMessage.error(res.msg)
        }
      })
    }
  })
}
const handleSearch = (): void => {
  datalist.value.loadData()
}
const handleClear = (): void => {}
onMounted(() => {
  getRoles()
})
</script>

<style lang="scss" scoped>
@import '@/assets/styles/mixin.scss';
@import '@/assets/styles/tablePage.scss';
@import '@/assets/styles/formPage.scss';
</style>